<template>
  <!--产能对比分析  -->
  <div class="capacity">
    <!-- 搜索框 -->
    <div class="capation_serch">
      <el-form class="table_serch" :rules="rules">
        <div class="table_serch_labe" style="margin-left:0px">
          <div class="table_serch_labe_title"  >机种编码</div>
          <el-autocomplete
            size="mini"
            popper-class="my-autocomplete"
            style="
              width: 135px;
              height: 30px;
              margin-left:9px;
              margin-top:8px;
            "
            v-model="formInline.recipe"
            @input="(e) => (formInline.recipe = validForbid(e))"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </div>

        <!-- 工业 -->
        <div class="table_serch_labe" style="margin-left: 0px">
          <div class="table_serch_labe_title">工单编码</div>
          <el-form-item label="">
            <el-autocomplete
              size="mini"
              popper-class="my-autocomplete"
              style="width: 140px; margin-left: 10px"
              v-model="formInline.order"
              @input="(e) => (formInline.order = validForbid(e))"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            >
              <i
                class="el-icon-edit el-input__icon"
                slot="suffix"
                @click="handleIconClick"
              >
              </i>
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
                <span class="addr">{{ item.address }}</span>
              </template>
            </el-autocomplete>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 0px">
          <div class="table_serch_labe_title">线体编码</div>
          <el-form-item label="">
            <el-autocomplete
              size="mini"
              popper-class="my-autocomplete"
              style="width: 140px; margin-left: 10px"
              v-model="formInline.line"
              @input="(e) => (formInline.line = validForbid(e))"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            >
              <i
                class="el-icon-edit el-input__icon"
                slot="suffix"
                @click="handleIconClick"
              >
              </i>
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
                <span class="addr">{{ item.address }}</span>
              </template>
            </el-autocomplete>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 0px">
          <div class="table_serch_labe_title">站点编码</div>
          <el-form-item label="">
            <el-autocomplete
              size="mini"
              popper-class="my-autocomplete"
              style="width: 135px; margin-left: 10px"
              v-model="formInline.site"
              @input="(e) => (formInline.site = validForbid(e))"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            >
              <i
                class="el-icon-edit el-input__icon"
                slot="suffix"
                @click="handleIconClick"
              >
              </i>
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
                <span class="addr">{{ item.address }}</span>
              </template>
            </el-autocomplete>
          </el-form-item>
        </div>


        <div class="table_serch_labe" style="margin-left: 0px">
          <div class="table_serch_labe_title">班次编码</div>
          <el-form-item label="">
            <el-autocomplete
              size="mini"
              popper-class="my-autocomplete"
              style="width: 140px; margin-left: 10px"
              v-model="formInline.class"
              @input="(e) => (formInline.class = validname(e))"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            >
              <i
                class="el-icon-edit el-input__icon"
                slot="suffix"
                @click="handleIconClick"
              >
              </i>
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
                <span class="addr">{{ item.address }}</span>
              </template>
            </el-autocomplete>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left:0px">
          <div class="table_serch_labe_title">起始日期1</div>
          <el-form-item label="">
            <el-date-picker
              size="mini"
              v-model="formInline.starttime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              style="width: 140px; margin-left: 10px"
            >
            </el-date-picker>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left:0px">
          <div class="table_serch_labe_title" >
            结束日期1
          </div>
          <el-form-item label="">
            <el-date-picker
              size="mini"
              v-model="formInline.endtime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              style="width: 135px; margin-left:3px"
            >
            </el-date-picker>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 0px">
          <div class="table_serch_labe_title">起始日期2</div>
          <el-form-item label="">
            <el-date-picker
              size="mini"
              v-model="formInline.starttime1"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              style="width: 140px; margin-left: 5px"
            >
            </el-date-picker>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left:0px">
          <div class="table_serch_labe_title" >
            结束日期2
          </div>
          <el-form-item label="">
            <el-date-picker
              size="mini"
              v-model="formInline.endtime1"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              style="width: 140px; margin-left: 5px"
            >
            </el-date-picker>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left:45.6%">
          <el-button type="mini"
          style="height:30px;margin-top:5px"
           @click="Capacity">查询</el-button>
          <!-- <el-button type="mini">刷新</el-button>
          <el-button type="mini">运行</el-button> -->
        </div>
      </el-form>
    </div>
    <div class="hader_content">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <div class="captin_select_cont">
          <!-- 下拉框 -->
          <div class="captin_select">
            缺陷选项
            <el-select
              v-model="val"
              @change="onchangclick"
              style="width: 120px; height: 40px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.value"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <el-tab-pane label="缺陷对比分析" name="first">
          <!-- 折线图  1-->
          <div id="capaction_one"></div>
        </el-tab-pane>
       
      </el-tabs>
    </div>

    <div class="table_loding" v-show="isshow">
      <div class="table_title">加载中... ....</div>
      <div class="table_timer">网络请求延时: {{ timer }}秒</div>
    </div>
      
   

    <Popup
      v-show="Popup_show"
      @ClosePopup="ClosePopup"
      @cancelget="cancelget"
      :timer="timer"
    ></Popup>
  </div>
</template>

<script>
import axios from "axios";
import Popup from "../../Pop-up/Pop-up";
export default {
  components: { Popup },
  data() {
    return {
      Popup_show: false,
      val: "",
      val2: "",
      timer: 0,
      isshow: false,
      valtimer: "",
      activeName: "first",
      // tableData: [
      //   {
      //     date: "ETTS0986765616272657",
      //     name: "ok",
      //     address: "ok",
      //   },
      //   {
      //     date: "ETTS0986765616272657",
      //     name: "ok",
      //     address: "ok",
      //   },
      //   {
      //     date: "ETTS0986765616272657",
      //     name: "ok",
      //     address: "ok",
      //   },
      // ],
      formInline: {
        recipe: "VR2-1-24",
        order: "",
        line: "",
        site: "",
        starttime: "2021-01-02",
        endtime: "2021-01-13",
        starttime1: "2021-01-05",
        endtime1: "2021-01-15",
        errorcode: "",
        class: "",
        personid: "",
        type: [],
      },
      options: [],
      restaurants: [],
      continue1: [],
      continue2: [],
      density1: [],
      density2: [],
      rules: {},
      itemsdata1: [],
      itemsdata2: [],
      itemsoption: [],
    };
  },

  mounted() {
    // this.restaurants = this.loadAll(); BrightDot  Line   Mura  total
  },
  methods: {
    //下拉框折线图事件
    onchangclick() {
      if (this.continue1) {
        for (let i = 0; i < this.continue1.length; i++) {
          if (this.continue1[i].type == this.val) {
            this.itemsdata1 = this.continue1[i];
            this.capaction_one();
          }
        }
      }

      for (let i = 0; i < this.continue2.length; i++) {
        if (this.continue2[i].type == this.val) {
          this.itemsdata2 = this.continue2[i];
          this.capaction_one();
          //  console.log('===================2',this.itemsdata2);
        }
      }
    },

    removetmer() {
      this.isshow = false;
      clearInterval(this.valtimer);
      this.timer = 0;
    },

    //计时器
    timerclick() {
      this.valtimer = setInterval(() => {
        this.isshow = true;
        this.timer++;
      }, 1000);
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
    Capacity() {
      setTimeout(() => {
        if (this.continue1.length == "") {
          this.Popup_show = true;
          this.Popup_timer = setInterval(() => {
            this.timer++;
          }, 1000);
        } else {
          return;
        }
      }, 5000);

      if (navigator.onLine) {
        // console.log("网络已连接");
        this.removetmer();
      } else {
        // console.log("已断网");
        setTimeout(() => {
          this.timerclick();
        }, 3000);
      }

      if (this.formInline.recipe == "") {
        this.$alert("机种编码不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (this.formInline.starttime == "") {
        this.$alert("起始日期1不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (this.formInline.endtime == "") {
        this.$alert("结束日期1不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (this.formInline.starttime1 == "") {
        this.$alert("起始日期2不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (this.formInline.endtime1 == "") {
        this.$alert("结束日期2不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (this.formInline.endtime < this.formInline.starttime) {
        this.$alert("结束日期1不能小于起始日期1", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (this.formInline.endtime1 < this.formInline.starttime1) {
        this.$alert("结束日期2不能小于起始日期2", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else {
        const CancelToken = axios.CancelToken;
        // var chart;
        // chart = this.$echarts.init(document.getElementById("capaction_one"));
        this.ajax({
          url: "Capacity",
          method: "GET",
          params: {
            data: this.formInline,
          },
          cancelToken: new CancelToken((c) => {
              this.cancel = c;
            }),
        }).then((res) => {
          var rult = res.data;
          if (rult.code == 200) {
            // console.log(rult.data);
            this.continue1 = rult.data.first;
            this.continue2 = rult.data.Second;
            if (this.continue1) {
              this.itemsdata1 = this.continue1[0];
              this.itemsdata2 = this.continue2[0];
              this.capaction_one();
            }
            for (let i = 0; i < rult.data.first.length; i++) {
              if (this.options.length == rult.data.first.length) {
                return false;
              } else {
                this.options.push(rult.data.first[i].type);
              }
            }

            for (let i = 0; i < rult.data.Second.length; i++) {
              if (this.itemsoption.length == rult.data.Second.length) {
                return false;
              } else {
                this.itemsoption.push(rult.data.Second[i].type);
              }
            }
          } else if (rult.code == 204) {
            this.$alert(rult.message, "消息提示", {
              confirmButtonText: "确定",
              callback: (action) => {
                this.$message({
                  type: "info",
                  message: `action: ${action}`,
                });
              },
            });
          }
        });
        // chart.dispose();
        // console.log('1111111111111111',chart)
      }
    },

    
    ClosePopup(){
       this.Popup_show = false;
       clearInterval(this.Popup_timer);
     },



    cancelget() {
     
      this.Popup_show = false;
      this.cancel();
      clearInterval(this.Popup_timer);
    },
    //  折线图 1
    capaction_one() {
      let capaction_one = this.$echarts.init(
        document.getElementById("capaction_one")
      );
      // console.log('11111111111111---',this.itemsdata1);
      // console.log("222222222222222----", this.itemsdata2);
      var keyday = [];
      var keyname = [];
      var keyval = [];
      var keyname2 = [];
      var keyval2 = [];
      keyname2.push(this.itemsdata2.type);
      keyname.push(this.itemsdata1.type);
      let listdata = this.itemsdata1.data;
      let listdata2 = this.itemsdata2.data;
      keyday.push(listdata[0].day);
      keyday.push(listdata[listdata.length - 1].day);
      for (let i = 0; i < this.itemsdata1.data.length; i++) {
        keyval.push(listdata[i].val);
      }

      for (let i = 0; i < this.itemsdata2.data.length; i++) {
        keyval2.push(listdata2[i].val);
      }
      capaction_one.setOption({
        title: {
          text: keyday.join("--"),
          x: "right",
          y: "1",
          marginLeft: "10%",
          textStyle: {
            fontSize: 12,
            fontWeight: 100,
          },
        },
        xAxis: {
          type: "category",
          data: [
            "1(日)",
            "2(日)",
            "3(日)",
            "4(日)",
            "5(日)",
            "6(日)",
            "7(日)",
            "8(日)",
            "9(日)",
            "10(日)",
            "11(日)",
            "12(日)",
            "13(日)",
            "14(日)",
            "15(日)",
          ],
          axisLabel: {
            fontSize: 10,
          },
        },
        legend: {
          data: keyname,
          right: "10%",
          top: "10%",
        },
        grid: {
          top: 70,
          bottom: 50,
        },
        yAxis: {
          type: "value",
        },
        tooltip: {
          trigger: "axis",
        },
        series: [
          {
            name: keyname,
            data: keyval,
            type: "line",
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "red",
                },
              },
            },
          },
          {
            name: keyname2,
            data: keyval2,
            type: "line",
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "blue",
                },
              },
            },
          },
        ],
      });
    },

    // 折线图 2
    capaction_two() {
      let capaction_two = this.$echarts.init(
        document.getElementById("capaction_two")
      );

      // console.log(this.continue2)
      var keyname = [];
      var BlackDotval = [];
      var Blockval = [];
      var BrightDotval = [];
      var Lineval = [];
      var Muraval = [];
      var totalval = [];
      var BlackDot = this.continue2[0].data;
      var Block = this.continue2[1].data;
      var BrightDot = this.continue2[2].data;
      var Line = this.continue2[3].data;
      var Mura = this.continue2[4].data;
      var total = this.continue2[5].data;
      for (let i = 0; i < this.continue2.length; i++) {
        keyname.push(this.continue1[i].type);
      }
      for (let i = 0; i < BlackDot.length; i++) {
        BlackDotval.push(BlackDot[i].val);
      }
      for (let i = 0; i < Block.length; i++) {
        Blockval.push(Block[i].val);
      }
      for (let i = 0; i < BrightDot.length; i++) {
        BrightDotval.push(BrightDot[i].val);
      }
      for (let i = 0; i < Line.length; i++) {
        Lineval.push(Line[i].val);
      }
      for (let i = 0; i < Mura.length; i++) {
        Muraval.push(Mura[i].val);
      }
      for (let i = 0; i < total.length; i++) {
        totalval.push(total[i].val);
      }
      capaction_two.setOption({
        title: {
          // text: "良率对比统计",
          x: "center",
          y: "0",
          textStyle: {
            fontSize: 20,
            fontWeight: 300,
          },
        },
        xAxis: {
          type: "category",
          data: [
            "1(日)",
            "2(日)",
            "3(日)",
            "4(日)",
            "5(日)",
            "6(日)",
            "7(日)",
            "8(日)",
            "9(日)",
            "10(日)",
            "11(日)",
            "12(日)",
            "13(日)",
            "14(日)",
            "15(日)",
          ],
        },
        legend: {
          data: keyname,
          right: "10%",
          top: "10%",
        },
        grid: {
          top: 70,
          bottom: 50,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            formatter: "{value}%",
            interval: "auto",
          },
        },
        tooltip: {
          trigger: "axis",
          formatter: "{b0}<br/>{a0}: {c0}%<br />{a1}: {c1}%<br />",
        },
        series: [
          {
            name: "BlackDot",
            data: BlackDotval,
            type: "line",
          },
          {
            name: "Block",
            data: Blockval,
            type: "line",
          },
          {
            name: "BrightDot",
            data: BrightDotval,
            type: "line",
          },
          {
            name: "Line",
            data: Lineval,
            type: "line",
          },
          {
            name: "Mura",
            data: Muraval,
            type: "line",
          },
          {
            name: "total",
            data: totalval,
            type: "line",
          },
        ],
      });
    },

    loadAll() {
      return [{ value: "", address: "" }];
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    },
  },
};
</script>

<style scoped>
.capacity {
  width: 100%;
  /* border: 1px solid #000; */
}
.capation_serch {
  width: 100%;
  /* border: 1px solid red; */
}
#capaction_one {
  width: 1300px;
  height: 490px;
  margin: 10px auto;
  margin-left:10%;
  background: #ffffff;
}
#capaction_two {
  width: 1000px;
  height: 290px;
  margin-top: 10px;
  background: #ffffff;
}
.capaction_list {
  width: 100%;
  margin-top: 10px;
  background: #ffffff;
}

.table_serch {
  width: 100%;
  min-width: 1000px;
  padding-top: 8px;
  /* border: 1px solid red; */
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.table_serch_labe {
  /* border: 1px solid #000; */
  height: 35px;
  display: flex;
  margin-left: 10px;
  margin-bottom: 10px;
}
.table_serch_labe_title {
  font-size: 11px;
  line-height: 40px;
}
.el-button_eb {
  margin-left: 5px;
  color: #fff;
}

.hader_content {
  width: 100%;
  /* border: 1px solid #000; */
  height:50%;
  margin-top: 20px;
  background: #fff;
}
.table_loding {
  width: 200px;
  height: 100px;
  border: 1px solid rgb(68, 186, 236);
  position: absolute;
  z-index: 999;
  top: 40%;
  left: 40%;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0px 0px 0px 1px;
}

.table_title {
  color: rgb(101, 91, 91);
  font-size: 20px;
  text-align: center;
  line-height: 60px;
}
.table_timer {
  color: rgb(101, 91, 91);
  font-size: 20px;
  text-align: center;
  line-height: 10px;
}

.captin_select_cont {
  display: flex;
}
</style>